<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.min.js"></script>
    <!-- 使用hooks书写 -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .wk {
        width: 100%;
        margin: 0 auto;
      }
      .container {
        display: flex;
        height: 700px;
      }
      .nav {
        width: 200px;
        height: 100%;
        border-right: 1px solid #000;
      }
      .content {
        width: calc(100% - 200px);
        height: 500px;
      }
      .dn {
        display: none;
      }
      .todo {
        margin: 100px 100px;
      }
      h4 {
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useRef, useState } = React;
      function App() {
        const [flag, setFlag] = useState(false);
        const leftRef = useRef();
        const product = useRef();
        const user = useRef();
        const [list, setlist] = useState([{ id: Date.now, content: "可达鸭" }]);
        return (
          <div className="wk">
            <div className="container">
              {/*左侧导航*/}
              <div className="nav" ref={leftRef}>
                <ul>
                  <li>
                    <h3
                      onClick={() => {
                        if (product.current.className == "li-div") {
                          product.current.className = "li-div dn";
                        } else {
                          product.current.className = "li-div";
                        }
                      }}
                    >
                      商品
                    </h3>
                    <div className="li-div" ref={product}>
                      <p>商品分类</p>
                      <p>商品列表</p>
                      <p>商品管理</p>
                    </div>
                  </li>
                  <li>
                    <h3
                      onClick={() => {
                        if (user.current.className == "li-div") {
                          user.current.className = "li-div dn";
                        } else {
                          user.current.className = "li-div";
                        }
                      }}
                    >
                      用户
                    </h3>
                    <div className="li-div" ref={user}>
                      <p>用户分类</p>
                      <p>用户列表</p>
                      <p>用户管理</p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="content">
                {/*折叠菜单按钮*/}
                <span
                  onClick={() => {
                    setFlag((flag) => {
                      flag = !flag;
                      if (flag) {
                        leftRef.current.style.display = "none";
                      } else {
                        leftRef.current.style.width = "200px";
                        leftRef.current.style.display = "block";
                      }
                      return flag;
                    });
                  }}
                >
                  折叠菜单图标
                </span>
                <div className="todo">
                  {list.map((item) => (
                    <div className="TodoList" key={item.id}>
                      <h4>{item.content}</h4>
                      <button
                        onClick={() => {
                          setlist(list.filter((a) => a.id !== item.id));
                        }}
                      >
                        删除
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
